<!--
* description: 导入文件
* author: dxuem
* createdDate: 2019-12-23
-->
<template>
  <el-col :span="span" class="w16" style="padding-left:5px">
    <lableName
      :style="span==12?'width:14%':'padding-right:0px'"
      :validrule="validrule"
      :curLabelName="curLabelName"
      :isShowLabel="isShowLabel"
      :isRequire="isRequire"
    ></lableName>
    <!-- <el-row> -->
    <el-col :span="16">
      <el-input
        v-model="file.name"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        size="small"
        @clear="clearCodeInput"
        clearable
        resize="none"
        @blur="sendCode1"
        :type="inputType"
      ></el-input>
    </el-col>
    <el-col :span="6" style="width:24%;text-align:left">
      <el-upload
        class="upload-demo"
        ref="upload"
        :http-request="handleChange"
        :accept="accepttype"
        :auto-upload="isautoupload"
        :show-file-list="false"
      >
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        <a class="linkFont" :href="modelHref" :download="DownName">模板下载</a>
        <el-button v-show="submitBtn" style="margin-left: 10px;" size="small" @click="submitUpload">导入文件</el-button>
      </el-upload>
    </el-col>
    <validateFormate :curLabelName="curLabelName" :validrule="validrule"></validateFormate>
    <!-- </el-row> -->
  </el-col>
</template>
<script>
import { inputMixins } from "@/components/mixins/inputMixins";
export default {
  name: "crmTextInput",
  mixins: [inputMixins],
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate") //校验提示样式组件
  },
  props: {
    action: { type: String, default: "/ly/mp/busicen/csc/excel/serverClassMutationExcelImport.do" }, //文件上传地址
    accepttype: { type: String, default: ".xls, .xlsx" }, //文件类型限制
    isautoupload: { type: Boolean, default: false }, //是否自动导入
    span: { type: Number, default: 24 },
    submitBtn:{type:Boolean,default:true},
    modelHref:{type:String,default:"/template/crm/服务类别导入模板.xlsx"},
    DownName:{type:String,default:"服务类别导入模板.xlsx"}
  },
  data() {
    return {
      file: {
        name: ""
      },
      // placeholder: this.readonly ? "" : "请输入",
      //suffixIcon: this.readonly ? "" : "el-icon-search"
      placeholder:"文件只能是"+this.accepttype+"格式",
    //   tt:this.modelHref.split("/"),
    //   dd:this.tt[this.tt.length-1],
    //   DownName:this.dd
      
    };
  },
  methods: {
    submitUpload() {
      console.log(this.file);
      if (!this.file.name) {
        this.$message({
          message: "请先选取文件!",
          type: "warning"
        });
        return;
      }
      var testmsg = this.file.name.substring(
        this.file.name.lastIndexOf(".") + 1
      );
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning"
        });
        return;
      }
      this.uploadSectionFile();
    },
    uploadSectionFile() {
      let that = this;
      var url = this.action; // API根据不同功能url不同，请配置到对应模块配置
      this.$requestImport(url, this.fileParam, function(response) {
        debugger;
        console.log(that.$refs.multipleTable.list);
        if (response.data.result == "1") {
          that.$alert("导入成功");
        } else {
          that.$alert("导入失败", "提示");
          that.$refs.multipleTable.list = response.data.rows;
          return;
        }
      });
    },
    handleChange(param) {
      this.fileParam = param;
      this.file.name = param.file.name;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    buildExportParam(queryObj, paramsObj) {
      var excelCols = {};
      for (var i = 0; i < this.tabledatas.colnames.length; i++) {
        excelCols[this.tabledatas.colnames[i].value] = this.tabledatas.colnames[
          i
        ].label;
      }
      // 数据类型
      paramsObj.dataType = "excel";
      // excel文件名称
      paramsObj.excelName = "线索单导入模板下载";
      // 根据请求API描述excel数据对象
      paramsObj.excels = [
        {
          // excel sheet名称
          title: "Sheet1",
          // 对应API服务编码
          actionName: queryObj.apiConfig.ServiceCode,
          // excel列
          columns: excelCols
        }
      ];
    }
    // setInputWidth(span){
    //   span=parseInt(span)
    //   switch(span){
    //     case 6:return '';
    //     case 12:return 'width:85%;line-height: 38px;';
    //     case 8 :return 'width:68%;line-height: 38px;'
    //   }
    // }
  }
};
</script>
<style scoped>
.w16 {
  padding: 0px;
}
</style>